<?php include('./includes/buildit_submenu.php'); ?>


<script type="text/javascript">

var chart1;
var chart2;
var chart3;
$(document).ready(function() {
   chart1 = new Highcharts.Chart({
      chart: {
         renderTo: 'chart-container-1',
         defaultSeriesType: 'line',
         marginRight: 130,
         marginBottom: 25
      },
      title: {
         text: 'Total Views',
         x: -20 //center
      },
      subtitle: {
         text: 'YourSite.com',
         x: -20
      },
      xAxis: {
         categories: ['12am', '1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm',  '1pm',  '2pm',  '3pm',  '4pm',  '5pm',  '6pm',  '7pm',  '8pm',  '9pm',  '10pm',  '11pm', ' ']
      },
      yAxis: {
         title: {
            text: 'Views'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#98cb00'
         }]
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               this.x +': '+ this.y + ' views';
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'top',
         x: -10,
         y: 100,
         borderWidth: 0
      },
      series: [{
         name: 'Total Views',
         data: [6, 8, 11, 7, 5, 6, 9, 10, 11, 14, 9, 7, 5, 7, 8, 9, 10, 10, 14, 6, 9, 12, 14, 11], 
         color: '#0098cb'
      }]
   });
   
    chart2 = new Highcharts.Chart({
      chart: {
         renderTo: 'chart-container-2',
         defaultSeriesType: 'line',
         marginRight: 130,
         marginBottom: 25
      },
      title: {
         text: 'Unique Views',
         x: -20 //center
      },
      subtitle: {
         text: 'YourSite.com',
         x: -20
      },
      xAxis: {
         categories: ['12am', '1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm',  '1pm',  '2pm',  '3pm',  '4pm',  '5pm',  '6pm',  '7pm',  '8pm',  '9pm',  '10pm',  '11pm', ' ']
      },
      yAxis: {
         title: {
            text: 'Views'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
         }]
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               this.x +': '+ this.y + 'unique views';
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'top',
         x: -10,
         y: 100,
         borderWidth: 0
      },
      series: [{
         name: 'Unique Views',
         data: [2, 4, 7, 4, 2, 4, 4, 6, 5, 9, 5, 4, 2, 5, 5, 7, 5, 5, 9, 4, 7, 8, 9, 7],
         color: '#98cb00'
      }]
   });
   
   
   chart3 = new Highcharts.Chart({
      chart: {
         renderTo: 'chart-container-3',
         defaultSeriesType: 'line',
         marginRight: 130,
         marginBottom: 25
      },
      title: {
         text: 'Incoming Links to',
         x: -20 //center
      },
      subtitle: {
         text: 'YourSite.com',
         x: -20
      },
      xAxis: {
         categories: ['12am', '1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm',  '1pm',  '2pm',  '3pm',  '4pm',  '5pm',  '6pm',  '7pm',  '8pm',  '9pm',  '10pm',  '11pm', ' ']
      },
      yAxis: {
         title: {
            text: 'Incoming Links'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
         }]
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               this.x +': '+ this.y + ' links';
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'top',
         x: -10,
         y: 100,
         borderWidth: 0
      },
      series: [{
         name: 'Links',
         data: [14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
         color: '#ffcb00'
      }]
   });

   
   $('.totalviews').click(function()
   {
   		$('#chart-container-1').show();
   		$(this).addClass('active');
   		$('#chart-container-2').hide();
   		$('.uniqueviews').removeClass('active');
   		$('#chart-container-3').hide();
   		$('.incominglinks').removeClass('active');
   		$('#display_box_arrow').css('left', '140px');
   });
   
   $('.uniqueviews').click(function()
   {
   		$('#chart-container-1').hide();
   		$('.totalviews').removeClass('active');
   		$('#chart-container-2').show();
   		$(this).addClass('active');
   		$('#chart-container-3').hide();
   		$('.incominglinks').removeClass('active');
   		$('#display_box_arrow').css('left', '466px');
   });
   
   $('.incominglinks').click(function()
   {
   		$('#chart-container-1').hide();
   		$('.totalviews').removeClass('active');
   		$('#chart-container-2').hide();
   		$('.uniqueviews').removeClass('active');
   		$('#chart-container-3').show();
   		$(this).addClass('active');
   		$('#display_box_arrow').css('left', '794px');
   });
   
});

</script>

<div id="analytics_filter">
	<label for="analytic_filter" style="float:left; margin-right:4px; margin-top:3px;">Showing for:</label>
	<select style="float:left" id="analytic_filter" name="analytic_filter">
		<option value="yesterday">Yesterday, May 25, 2011</option>
		<option value="week">Past Week</option>
		<option value="month">Past Month</option>
		<option value="year">Past Year</option>
	</select>
</div>

<div style="clear:both"></div>

<div id="display_box" style="float:left;" class="totalviews active"><h1>218</h1><p>Total Views</p></div>
<div id="display_box" class="uniqueviews"><h1>123</h1><p>Unique Views</p></div>
<div id="display_box" style="float:right" class="incominglinks"><h1>15</h1><p>Links to YourSite.com</p></div>
<div id="display_box_arrow"></div>

<div id="chart-container-1" style="width: 966px; height: 400px"></div>
<div id="chart-container-2" style="width: 966px; height: 400px; display:none;"></div>
<div id="chart-container-3" style="width: 966px; height: 400px; display:none;"></div>
<br /><br /><br />
